<template>
  <view class="tarcontainer">
    <view class="left">
      <view class="img">
        <navigator
          class=""
          target=""
          url="/pages/music/music"
          hover-class="navigator-hover"
          open-type="navigate"
        >
          <!-- style="animation-play-state:{{action.method=='play'?'running':'paused'}}"
					判断是否旋转 -->
          <view class="imgbox" :style="{'animation-play-state':getStatus? 'running' : 'paused'}">
			  <image
			    class=""
			    :src="getSong.picUrl"
			    mode="widthFix"
			  />
		  </view>
        </navigator>
      </view>
      <view class="conbox">
        <view class="title">
          {{ getSong.name }}
        </view>
        <view class="author">
          {{ getSong.author }}
        </view>
      </view>
    </view>

    <view class="right">
      <view class="control" @click="playOrPause">
        <image
          v-if="!getStatus"
          src="../../static/play.png"
          mode="widthFix"
        />
        <image
          v-else
          class=""
          src="../../static/pause.png"
          mode="widthFix"
        />
      </view>
      <view class="list" @click="goMusic">
        <image class="" src="../../static/music2.png" mode="widthFix" />
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex"
export default {
  data() {
    return {
    }
  },
  computed:{
	  ...mapGetters(["getSong","getStatus"])
  },
  methods: {
	  playOrPause(){
		  this.$store.commit("upDateStatus")
	  },
	  goMusic(){
		  uni.navigateTo({
		  	url:"../../pages/music/music"
		  })
	  }
  },
}
</script>

<style lang="scss" scoped>
/* components/tarbar/tarbar.wxss */
.tarcontainer {
  border-top: 1upx solid gainsboro;
  height: 120upx;
  width: 100%;
  background: white;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: $uni-bg-color;
  color: white;

  .left {
    flex: 3;
    display: flex;
    position: relative;

    .img {
      position: absolute;
      top: -40upx;
      left: 20upx;
      width: 160upx;
      height: 160upx;
      background: $uni-bg-color;
      border-radius: 50%;
      
	  .imgbox{
		  margin: 10upx;
		  width: 140upx;
		  border-radius: 50%;
		  height: 140upx;
		  animation: rotate 20s linear infinite;
		  overflow: hidden;
		  image {
		    width: 140upx;
			height: 140upx;
		  }
	  }
      
    }

    .conbox {
      height: 120upx;
      margin: 20upx;
      margin-left: 200upx;
      width: calc(100% - 220upx);

      view {
        margin: 0px;
        height: 40upx;
        line-height: 40upx;
      }

      .title {
        font-size: 35upx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }

      .author {
        font-size: 25upx;
      }
    }
  }

  .right {
    flex: 1;
    display: flex;

    .control {
      flex: 1;
      height: 70upx;
      margin: 27upx 10upx;
      overflow: hidden;
      text-align: right;

      image {
        width: 65upx;
        height: auto;
      }
    }

    .list {
      flex: 1;
      height: 70upx;
      margin: 22upx 10rpx;
      overflow: hidden;

      image {
        width: 70rpx;
        height: auto;
      }
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>
